<template>
	<view class="app-components-picker-select" >
		<view class="e-rela">
			<e-input ref="inputRef" :modelValue="inputValue" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :inputAlign="inputAlign" :border="border" :shape="shape" :suffixIcon="suffixIcon" :suffixIconStyle="suffixIconStyle" readonly ></e-input>
			<view class="app-components-picker-select__mask e-abso"  @tap="handleClick">
				
			</view>
		</view>
		<e-picker :keyName="labelKey" :show="show" :columns="columns" :cancelText="$t('common.取消')" :confirmText="$t('common.确认')" @confirm="handlePickerConfirm"
			@cancel="show = false" v-if="pickerType === 'picker'"></e-picker>
		<e-datetime-picker ref="datePicker" :modelValue="datetimePickerModelValue" :show="show" :minDate="minDate" :maxDate="maxDate"  :mode="datetimePickerMode" @cancel="show = false" @confirm="handleDatePickerConfirm" v-else-if="pickerType === 'datetime-picker'">
		</e-datetime-picker>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: "picker-select",
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	})
</script>
<script lang="ts" setup>
	import {ref,watch,computed} from 'vue'
	import {getProperty,timeFormat,empty} from '@/common/utils'
	import type {
		InputInstance
	} from '@/uni_modules/endless-ui/typing'
	interface PickerSelectProps {
		disabled?:boolean
		placeholder?:string
		placeholderStyle?:string|Record<string,string>
		inputAlign?:string
		suffixIcon?:string
		suffixIconStyle?:string|Record<string,string>
		border?:string
		shape?:'circle'|'square'
		labelKey?:string
		valueKey?:string
		modelValue?:string|number
		columns?:Array<any>
		pickerType?:'picker'|'datetime-picker'
		minDate?:number
		maxDate?:number
		datetimePickerMode?:string
		formatter?:string
		valueFormatter?:string
	}
	
	
	const props = withDefaults(defineProps<PickerSelectProps>(), {
		border:'none',
		suffixIcon:'arrow-right',
		suffixIconStyle:'color:#999;font-size:16px;top:2rpx',
		pickerType:'picker',
		datetimePickerMode:'date',
		formatter:'yyyy-mm-dd',
		valueFormatter:'yyyy-mm-dd',
		minDate:new Date('2020/01/01').getTime(),
	})
	const emit = defineEmits(['update:modelValue','change'])
	const inputRef = ref<InputInstance>()
	const inputValue = ref('')
	let pickerValue:string|number
	
	
	const datetimePickerModelValue = computed(() => {
		if(inputValue.value&&props.pickerType ==='datetime-picker'&&props.formatter !== props.valueFormatter){
			return timeFormat(inputValue.value,props.formatter)
		}
		return undefined
	})
	
	const show = ref(false)
	const handleClick = () => {
		if(!props.disabled){
			show.value = true
		}
	}
	
	const handlePickerConfirm = (e:any) => {
		show.value = false
		const item = e.value[0]
		inputValue.value = props.labelKey ? getProperty(item,props.labelKey) :item
		pickerValue = props.valueKey ? getProperty(item,props.valueKey) :item
		emit('update:modelValue',pickerValue)
		emit('change',pickerValue)
	}
	
	const handleDatePickerConfirm = (e:{value:number}) => {
		show.value = false
		inputValue.value = timeFormat(e.value,props.valueFormatter||props.formatter||'yyyy-mm-dd')
		emit('update:modelValue',inputValue.value)
		emit('change',inputValue.value)
	}
	
	const getInputValue = () => {
		if(!empty(props.modelValue) ){
			if(props.modelValue!==pickerValue){
				if(props.pickerType === 'picker'&&props.columns?.length){
					const columns =  props.columns[0]
					const columnItem = columns.find(item => {
						let value = props.valueKey ? getProperty(item,props.valueKey) :item
						return value === props.modelValue
					})
					inputValue.value = props.labelKey ? getProperty(columnItem,props.labelKey) :columnItem
				}else{
					inputValue.value = timeFormat(props.modelValue,props.formatter)
				}
			}
			
		}else{
			pickerValue = ''
			inputValue.value = ''
		}
	}
	
	watch(() => [props.modelValue,props.columns],() => {
		getInputValue()
	},{
		immediate:true
	})
	
</script>

<style lang="scss" scoped>
	@include appBem_b(components-picker-select){
		flex: 1;
		@include appBem_e(mask){
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 10;
		}
	}

</style>